<template>
  <div class="main">
    <div v-if="dataList.length <= 0">
      <el-empty description="空空如也"></el-empty>
    </div>
    <div class="main_box show_pc" v-else>
      <img class="main_box_image" src="../../../assets/images/hire/item1_bg.png" alt="" />
      <div class="main_row swiper" id="banner">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in dataList" :key="index">
            <div class="item" v-for="(it, i) in item" :key="i" @click="linkTo('company', it.id)">
              <img :src="it.companyLogo" class="logo" />

              <div class="name">{{ it.companyName }}</div>
              <div class="industry">{{ it.industry }}</div>
              <div class="item_bot">
                <div class="nodata" v-if="it.companyJobDOList.length <= 0">
                  --暂无更多职位--
                </div>
                <div class="rows" v-for="(t, j) in it.companyJobDOList" :key="j">
                  <span class="jobName">{{ t.jobName }}</span>
                  <span class="city">{{ t.city }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main_row_wrapper">
      <div class="list_wrapper">
        <div class="list-swiper-slide">
          <div class="item" v-for="(it, i) in mydataList" :key="i" @click="linkTo('company', it.id)">
            <div class="company_content">
              <img :src="it.companyLogo" class="logo" />
              <div class="company_info">
                <div class="name">{{ it.companyName }}</div>
                <div class="industry">{{ it.industry }}</div>
              </div>
            </div>

            <div class="item_bot">
              <div class="nodata" v-if="it.companyJobDOList.length <= 0">
                --暂无更多职位--
              </div>
              <div class="rows" v-for="(t, j) in it.companyJobDOList" :key="j">
                <span class="jobName">{{ t.jobName }}</span>
                <span class="city">{{ t.city }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "item1",
  props: {
    dataList: Array,
  },
  components: {},
  data() {
    return {
      swiper: null,
    };
  },
  computed: {
    mydataList() {

      let mydata = []
      this.dataList.forEach(item => {
        console.log(...item, 'dataList')
        // console.log(this.dataList, 'dataList')

        mydata.push(...item)



      })
      console.log(mydata, 'dataList')
      console.log(this.dataList, 'is.')


      return mydata
    }
  },
  methods: {
    linkTo(routeName, id) {
      this.$router.push({ name: routeName, query: { id: id } });
    },
    slidePrev() {
      this.swiper.slidePrev();
    },
    slideNext() {
      this.swiper.slideNext();
    },
    initSwiper() {
      if (this.swiper === null) {
        this.swiper = new Swiper("#banner", {
          observer: true,
          observeParents: true,
        });
      }
    },
  },
  created() {
  },
  mounted() { },
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  overflow: hidden;

  .main_row_wrapper {
    display: none;
  }
}

.main_box {
  width: 100%;
  position: relative;
  padding-left: 294px;
  height: 580px;
  overflow-x: hidden;

  &>img {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 250px;
    height: 520px;
    border-radius: 0;
  }

  .main_row {
    width: 100%;
    padding: 30px 0;
    height: 580px;
    overflow: hidden;

    .swiper-slide {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 30px;
      height: 520px;
    }

    .item {
      width: calc((100% - 40px) / 3);
      height: 250px;
      border: 1px solid #ebebeb;
      background: linear-gradient(148deg, #d2e4f9 0%, #fafbfb 64%);
      box-shadow: 0px 0px 10px 1px rgba(124, 124, 124, 0.19);
      border-radius: 10px;
      margin-bottom: 20px;
      margin-right: 20px;
      transition-duration: 0.3s;
      padding: 110px 0 78px;
      position: relative;
      font-family: MicrosoftYaHei;
      overflow: hidden;
      cursor: pointer;

      .logo {
        position: absolute;
        width: 78px;
        height: 78px;
        border-radius: 10px;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
      }

      .name {
        width: 100%;
        padding: 0 10px;
        font-size: 20px;
        font-weight: bold;
        color: #000;
        line-height: 21px;
        margin-bottom: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        transition-duration: 0.3s;
      }

      &:hover .name {
        color: #15389a;
      }

      .industry {
        font-size: 15px;
        line-height: 16px;
        font-weight: 400;
        color: #999999;
        text-align: center;
      }

      .item_bot {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 78px;
        background: #fff;
        padding: 16px 24px;
        font-family: MicrosoftYaHeiLight;
        font-weight: 400;
        font-size: 13px;
        line-height: 14px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        .nodata {
          position: absolute;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          color: #9597a0;
        }

        .rows {
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;

          .jobName {
            color: #000000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 185px;
          }

          .city {
            color: #999999;
          }
        }
      }

      &:nth-child(3),
      &:nth-child(6) {
        margin-right: 0;
      }

      &:hover {
        box-shadow: 0px 0px 25px 2px rgba(124, 124, 124, 0.41);
        transform: scale(1.02);
      }
    }
  }
}



@media screen and (max-width: 480px) {
  .main {
    width: 100%;
    overflow: hidden;

    .show_pc {
      display: none;
    }

    .main_row_wrapper {
      display: inline-block;
      width: 100%;
      padding: 0.15rem 0;
      // height: 580px;
      overflow: hidden;

      .list-swiper-slide {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        padding: 0 0.1rem;
        // &.list-swiper-slide::after {
        //     content: '';
        //     flex: 1;    /* 或者flex: 1 */
        // }
        // padding: 0 30px;
        // height: 520px;
      }

      .item {
        display: flex;
        flex-direction: column;
        // width: calc((100% - 40px) / 3);
        width: 48%;
        // height: 170px;
        border: 0.01rem solid #ebebeb;
        // background: linear-gradient(148deg, #d2e4f9 0%, #fafbfb 64%);
        // box-shadow: 0px 0px 0.1rem 0.01rem rgba(124, 124, 124, 0.19);
        box-shadow: none;
        border-radius: 0.04rem;
        margin-bottom: 0.11rem;
        transition-duration: 0.3s;
        font-family: MicrosoftYaHei;
        cursor: pointer;
        overflow: hidden;

        .company_content {
          display: flex;
          padding: 0.2rem 0px 0.15rem 0.12rem;
          background: linear-gradient(148deg, #d2e4f9 0%, #fafbfb 64%);

          .logo {
            // position: absolute;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 0.1rem;
            left: 50%;
            // transform: translateX(-50%);
            top: 0.2rem;
          }

          .company_info {
            padding: 0 0px 0 0.1rem;

            .name {
              width: 0.8rem;

              font-size: 0.16rem;
              font-weight: bold;
              color: #000;
              line-height: 0.21rem;
              margin-bottom: 0.1rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              // text-align: center;
              transition-duration: 0.3s;
            }

            &:hover .name {
              color: #15389a;
            }

            .industry {
              font-size: 0.15rem;
              line-height: 0.16rem;
              font-weight: 400;
              color: #999999;
              // text-align: center;
            }
          }
        }


        .item_bot {
          width: 100%;
          // position: absolute;
          left: 0;
          bottom: 0;
          // height: 78px;
          background: #fff;
          padding: 0.15rem 0.1rem 0;
          font-family: MicrosoftYaHeiLight;
          font-weight: 400;
          font-size: 0.13rem;
          line-height: 0.14rem;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;

          .nodata {
            // position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            // left: 0;
            // top: 50%;
            transform: none;
            color: #9597a0;
          }

          .rows {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            margin-bottom: 0.15rem;

            .jobName {
              color: #000000;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              max-width: 1rem;
            }

            .city {
              color: #999999;
            }
          }
        }

        &:hover {
          // box-shadow: 0px 0px 25px 2px rgba(124, 124, 124, 0.41);
          box-shadow: none;
          // transform: scale(1.02);
          transform: none;
        }
      }
    }
  }
}</style>
